<!--
 * @Date: 2022-07-12 20:22:31
 * @LastEditTime: 2022-07-14 10:32:35
-->
<template>
<div class="Slider">
  <div v-loading="like_movie_loading" v-if="isLogin">
    <div class="typetitle"><b>猜你喜欢的电影</b></div>
    <div class="line"></div>
    <el-carousel indicator-position="outside" :autoplay="false" arrow="always" height="220px" v-if="!like_movie_loading">
      <el-carousel-item v-for="item in 1" :key="item" class="cs-containner">
        <div v-for="value in recommand_videos.slice((item - 1) * itemNum, (item - 1) * itemNum + itemNum)" :key="value.id">
          <DisplayContainer :videoDetail="value"/>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div v-loading="like_user_loading" v-if="isLogin">
    <div class="typetitle"><b>猜你感兴趣的人</b></div>
    <div class="line"></div>
    <el-carousel indicator-position="outside" :autoplay="false" arrow="always" height="220px" v-if="!like_user_loading">
      <el-carousel-item v-for="item in 1" :key="item" class="cs-containner">
        <div v-for="value in recommand_users.slice((item - 1) * itemNum, (item - 1) * itemNum + itemNum)" :key="value.id">
          <UsersContainer :userInfo="value"/>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div v-loading="rank_loading">
    <div class="typetitle">大众口味电影推荐</div>
    <el-radio-group v-model="rank_select" size="small" class="rd-rank-button" @change="initVideos()">
      <el-radio-button :label="index" v-for="(value, index) in menuLabels" :key="value">{{value}}</el-radio-button>
    </el-radio-group>
    <el-carousel indicator-position="outside" :autoplay="false" arrow="always" height="220px" v-if="!rank_loading">
      <el-carousel-item v-for="item in 2" :key="item" class="cs-containner">
        <div v-for="value in rank_videos.slice((item - 1) * itemNum, (item - 1) * itemNum + itemNum)" :key="value.id">
          <DisplayContainer :videoDetail="value"/>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</div>
</template>

<script>
import DisplayContainer from '@/components/display/DisplayContainer.vue'
import { getBestMovieList, getMostHotMovieList, getRecommandUserForMe, getRecommandMovieForMe } from '../../api/movie'
import UsersContainer from './UsersContainer.vue'
export default {
  components: {
    DisplayContainer,
    UsersContainer
  },
  data () {
    return {
      rank_videos: [],
      rank_select: 0,
      recommand_videos: [],
      recommand_users: [],
      itemNum: 5,
      menuLabels: [
        '热门',
        '好评'
      ],
      like_movie_loading: true,
      like_user_loading: true,
      rank_loading: true,
      isLogin: false
    }
  },
  mounted: function () {
    this.initVideos()
    this.isLogin = this.$store.state.isLogin
    this.loadRecommandMovieForMe()
    this.loadRecommandUserForMe()
  },
  methods: {
    initVideos: function () {
      this.rank_videos = null
      this.rank_videos = []
      this.rank_loading = true
      switch (this.rank_select) {
        case 0:
          this.loadMostHotMovieList(1)
          break
        case 1:
          this.loadBestMovieList(1)
          break
      }
    },
    loadMostHotMovieList: function (pageNum) {
      getMostHotMovieList(pageNum)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.rank_videos.push(res.data.data[i])
            }
            this.rank_loading = false
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    loadBestMovieList: function (pageNum) {
      getBestMovieList(pageNum)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.rank_videos.push(res.data.data[i])
            }
            this.rank_loading = false
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    loadRecommandUserForMe: function () {
      if (!this.$store.state.isLogin) return
      this.recommand_users = null
      this.recommand_users = []
      getRecommandUserForMe()
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.recommand_users.push(res.data.data[i])
            }
            this.like_user_loading = false
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    loadRecommandMovieForMe: function () {
      if (!this.$store.state.isLogin) return
      this.recommand_videos = null
      this.recommand_videos = []
      getRecommandMovieForMe()
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.recommand_videos.push(res.data.data[i])
            }
            this.like_movie_loading = false
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
.displayItem {
  width: 120px;
  height: 200px;
  margin: 10px;
 padding: 1px;
}
.Slider{
  padding-top: 40px;
  width:100%;
  flex-direction: column;
  flex-wrap: wrap;
  display: inline-block;
}
.typetitle {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  vertical-align: top;
  padding-top: 20px;
  white-space: nowrap;
}
.el-menu {
  display: inline-block;
}
.cs-containner {
  display: flex;
  flex-direction: row;
}
.line {
  padding:5px;
}
</style>
